<template>
  <div class="form-section">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.type', '方法类型')"
          prop="type"
          :tooltipContent="$t('menu.dev.action.tip.type', '系统内置方法')"
        >
          <ra-dict-select
            :placeholder="
              $p('menu.dev.action.field.type', '方法类型', 'select')
            "
            v-model="formData.type"
            :code="typeDictCode"
            type="select"
            @change="updateActionType"
          />
        </el-form-item-plus>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.title', '方法名称')"
          prop="title"
          :tooltipContent="
            $t(
              'menu.dev.action.tip.title',
              '方法如果有按钮，则用于设置按钮的标签',
            )
          "
        >
          <el-input
            v-model="formData.title"
            :placeholder="$p('menu.dev.action.field.title', '方法名称')"
          />
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.method', '函数名称')"
          prop="method"
          :tooltipContent="
            $t(
              'menu.dev.action.tip.method',
              '方法对应的前端方法名称和后端方法名称（后端方法自动转换为驼峰命名）',
            )
          "
        >
          <el-input
            v-model="formData.method"
            :placeholder="
              $p('menu.dev.action.field.method', '函数名称') +
              'add_user => addUser'
            "
            @change="updateActionCode"
          />
        </el-form-item-plus>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('common.field.remark', '备注')"
          prop="remark"
        >
          <el-input
            v-model="formData.remark"
            :placeholder="$p('common.field.remark', '备注')"
          />
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('common.field.status', '状态')"
          prop="status"
        >
          <el-radio-group v-model="formData.status">
            <el-radio :value="1"> 启用</el-radio>
            <el-radio :value="0"> 禁用</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus :label="$t('common.field.sort', '排序')" prop="sort">
          <el-input-number
            v-model="formData.sort"
            controls-position="right"
            :min="0"
          />
        </el-form-item-plus>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

const props = defineProps({
  formData: {
    type: Object,
    required: true,
  },
  tableFields: {
    type: Array,
    default: () => [],
  },
  updateActionType: {
    type: Function,
    required: true,
  },
  updateActionCode: {
    type: Function,
    required: true,
  },
});

const route = useRoute();

const typeDictCode = computed(() => {
  if (route.query.app === 'admin' && props.tableFields.length > 0) {
    console.log('typeDictCode', 'sys_admin_action_options');
    return 'sys_admin_action_options';
  }
  if (route.query.app === 'admin' && props.tableFields.length <= 0) {
    console.log('typeDictCode', 'sys_admin_action_except_table_options');
    return 'sys_admin_action_except_table_options';
  }
  if (route.query.app === 'api') {
    console.log('typeDictCode', 'sys_api_action_options');
    return 'sys_api_action_options';
  }
});
</script>

<style lang="scss" scoped></style>
